<template>
    <div v-loading="loading">
        <div class="content-item">
            <div>
                <el-image :src="require('../images/studyed-title.png')" style="height: 28px;"></el-image>
            </div>
            <ul class="course-target">
                <li v-for="item, index in overviewInfo.targetList" :key="index">{{ item }}</li>
            </ul>
        </div>
        <div class="content-item">
            <div>
                <el-image :src="require('../images/course-desc-title.png')" style="height: 28px;"></el-image>
            </div>
            <p>
                {{ overviewInfo.introduce }}
            </p>
        </div>
        <div class="content-item more-div">
            <el-card class="more-info" shadow="hover">
                <h4>适合人群</h4>
                <div v-for="item, index in overviewInfo.crowdList" :key="index">{{ item }}</div>
            </el-card>
            <el-card class="more-info" shadow="hover">
                <h4>技术储备</h4>
                <div v-for="item, index in overviewInfo.needSkillList" :key="index">{{ item }}</div>
            </el-card>
            <el-card class="more-info" shadow="hover">
                <h4>环境配置</h4>
                <div v-for="item, index in overviewInfo.environmentList" :key="index">{{ item }}</div>
            </el-card>
        </div>
        <div class="content-item">
            <div>
                <el-image :src="require('../images/info_title.png')" style="height: 28px;"></el-image>
            </div>
            <el-card shadow="hover" class="teacher">
                <div class="teacher-info">
                    <el-avatar :src="overviewInfo.lecturer.avatar" :size="75"
                        style="margin-right: 20px;"></el-avatar>
                    <div>
                        <h3>{{ overviewInfo.lecturer.nickname }}</h3>
                        <div>{{ overviewInfo.lecturer.job }}</div>
                    </div>
                </div>
                <p>
                   {{ overviewInfo.lecturer.introduce }}
                </p>
            </el-card>
        </div>
    </div>
</template>

<script>
import { reqCourseOverview } from "@/api/course"

export default {
    name: "course-detail-overview",
    data() {
        return {
            loading: false,
            overviewInfo: {}
        }
    },
    methods: {
        async getCourseOverview() {
            const courseId = this.$route.params.courseId;
            this.loading = true;
            try {
                const res = await reqCourseOverview({ id: courseId });
                this.overviewInfo = res.data;
                this.loading = false;
                return res.data;
            } catch (error) {
                this.loading = false;
                this.$message.error(error.message)
                throw error; // Optionally, you can rethrow the error if needed.
            }
        }
    },
}
</script>

<style scoped>
.course-target {
    display: flex;
    justify-content: space-around;
    flex-wrap: wrap;
    margin: 20px 0;
}

.course-target li {
    font-size: 18px;
    color: #1c1e20;
    letter-spacing: 0;
    margin: 10px 0;
    text-overflow: ellipsis;
    word-break: break-all;
    word-wrap: break-word;
    overflow: hidden;
    text-overflow: -o-ellipsis-lastline;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 1;
}

.course-target li::before {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-right: 8px;
    background: #1c1f21;
    border-radius: 50%;
    vertical-align: middle;
}

.content-item {
    margin-top: 20px;
    margin-bottom: 40px;
}

.content-item p {
    margin: 20px 0;
    font-size: 18px;
    color: #1c1e20;
}

.more-div {
    display: flex;
    justify-content: space-around;
    align-items: center;
}

.more-info {
    padding: 10px;
    background-color: rgb(248, 250, 252);
    text-align: center;
}

.more-info div {
    margin: 5px 0;
    font-size: 14px;
    color: #1c1f21;
}

.teacher {
    margin: 20px 0;
    background-color: rgb(248, 250, 252);
}

.teacher-info {
    display: flex;
    align-items: center;
}
</style>